<template>
    <div class="provide">
        <div class="title d-none d-lg-block">
            <img src="@static/ability/market_title.png">
        </div>
        <div class="wrap d-none d-lg-block" :style="{backgroundImage:`url(${market_bg})`}">
            <div class="wrap_left message">
                <div class="con">
                    <div class="market_top">
                        帮助商家商家对接多个
                        流量端资源，实现快速
                        卖货。
                    </div>
                    <div class="market_icon">
                        <img src="@static/ability/market_bg_01.png">
                    </div>
                    <div class="market_bottom">
                        <p>
                            兼顾社交电商和直播带货双属
                            性，联合微信、快手、QQ、等
                            多个大流量平台，协助商家开辟
                            新的市场。

                        </p>
                        <p>
                            海量全赞，联合多个MCN机构。
                            及头部网红主播，覆盖海量粉丝
                            打造爆款。
                        </p>
                    </div>
                </div>
            </div>
            <div class="wrap_middle message">
                <div class="con">
                    <div class="market_top">
                        帮助商家商家对接多个
                        流量端资源，实现快速
                        卖货。
                    </div>
                    <div class="market_icon">
                        <img src="@static/ability/market_bg_02.png">
                    </div>
                    <div class="market_bottom">
                        <p>
                            订单统计、佣金统计、订单状
                            态等数据一目了然,参考推广效
                            果分析，打磨更优推广方案。|
                        </p>
                        <p>
                            先推广、成交后付佣金，强大
                            的交易结算系统+有赞护航。稳
                            定安全又放心。
                        </p>
                    </div>
                </div>
            </div>
            <div class="wrap_right message">
                <div class="con">
                    <div class="market_top">
                        帮助商家商家对接多个
                        流量端资源，实现快速
                        卖货。
                    </div>
                    <div class="market_icon">
                        <img src="@static/ability/market_bg_03.png">
                    </div>
                    <div class="market_bottom">
                        <p>
                            全赞资源位支持，流量倾斜扶
                            持潜力商家。
                        </p>
                        <p>
                            近百种营销玩法，裂变获客,
                            多种活动专区专属分佣推广商家
                            福利。
                        </p>
                    </div>
                </div>
            </div>
        </div>
         <div class="title_block d-lg-none">
            <img src="@static/ability/market_title.png">
        </div>
        <div class="wrap_block d-lg-none">
            <div class="wrap_left message">
                <div class="con">
                    <p class="market_top">
                        帮助商家商家对接多个
                        流量端资源，实现快速
                        卖货。
                    </p>
                    <div class="market_bott">
                        <p>
                            兼顾社交电商和直播带货双属
                            性，联合微信、快手、QQ、等
                            多个大流量平台，协助商家开辟
                            新的市场。
    
                        </p>
                        <p>
                            海量全赞，联合多个MCN机构。
                            及头部网红主播，覆盖海量粉丝
                            打造爆款。
                        </p>
                    </div>
                </div>
                <div class="con">
                    <p class="market_top">
                        帮助商家商家对接多个
                        流量端资源，实现快速
                        卖货。
                    </p>
                    <div class="market_bott">

                        <p>
                            订单统计、佣金统计、订单状
                            态等数据一目了然,参考推广效
                            果分析，打磨更优推广方案。|
                        </p>
                        <p>
                            先推广、成交后付佣金，强大
                            的交易结算系统+有赞护航。稳
                            定安全又放心。
                        </p>
                    </div>
                </div>
                <div class="con">
                    <p class="market_top">
                        帮助商家商家对接多个
                        流量端资源，实现快速
                        卖货。
                    </p>
                    <div class="market_bott">
                        <p>
                            全赞资源位支持，流量倾斜扶
                            持潜力商家。
                        </p>
                        <p>
                            近百种营销玩法，裂变获客,
                            多种活动专区专属分佣推广商家
                            福利。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg d-none d-lg-block">
            <div class="up">
                <img src="@static/ability/market_KOL.png" alt="">
            </div>
            <div class="down">
                <img src="@static/ability/market.png" alt="">
            </div>
            
        </div>
        <div class="bg_bl d-lg-none">
            <div class="up">
                <img src="@static/ability/market_KOL.png" alt="">
            </div>
            <div class="down">
                <img src="@static/ability/market.png" alt="">
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            market_bg:require("@static/ability/market_bg.png"),
            sass_bg:require('@static/ability/platform.png'),


        }

    }
}
</script>

<style scoped lang="stylus">
@media (min-width:300px){
    .provide{
        width:90% !important
        height:800px !important
        margin: 0 5%
        .title_block{
            width:200px
            height:28px
            margin-bottom:20px

        }
        .wrap_block{
            .wrap_left{
                .con{
                    .market_top{
                        font-weight:700
                        margin-bottom:20px
                    }
                    .market_bott{
                         p{
                            width:80%
                            font-size:13px
                            line-height:20px
                            margin-bottom:20px
                        }
                    }
                   
                }
            }
            
        }
        .bg_bl{
            width: 337px
            height:232px
            position:relative
            .up{
                width:290px
                position:absolute
                left:50%
                top:50%
                transform:translate(-50%,-50%)
                z-index:2
            }
            .down{
                position:absolute
                top:0
                left:0
                width: 337px
                height:232px
                z-index:1
            }
        }

    }
}
@media (min-width:992px){
    .provide{
        width:1087px
        height:1000px !important
        .title_block{
            width:200px  !important
            height:28px  !important
            margin-bottom:20px  !important

        }
        .wrap{
            margin:0 auto !important
            width:1087px !important

            .wrap_left{
                .con{
                    .market_top{
                        font-weight:700 !important
                        margin-bottom:20px !important
                    }
                    .market_bott{
                         p{
                            width:80% !important
                            font-size:13px !important
                            line-height:20px !important
                            margin-bottom:20px !important
                        }
                    }
                   
                }
            }
            
        }
        .bg{
            width:871px      !important           
            height:599px !important
            position:absolute !important
            bottom:0 !important
            // right:-12px !important
            left:50%
            transform:translateX(-35%)
            z-index:100 !important
            .up{
                position:absolute
                bottom:57px !important
                right:40px !important
                width:783px !important
                height:506px !important
                z-index:2 !important
            }
            .down{
                position:absolute !important
                width:100% !important
                z-index:1 !important
            }
        }

    }
}
    .provide
        width:1087px
        height:1000px
        margin: 0 auto
        position:relative
        img
            width:100%
            height:100%
        .title
            width:237px
            height 28px
            margin: 0 auto
            position:relative
            &:before
                position:absolute
                top: 42px;
                left: -38px;
                content:''
                display:block
                width: 319px
                height:2px
                background-color: #af9af5

        .wrap
            width:1087px
            height: 529px
            position:relative
            z-index:500
            // .message

            .wrap_left
                width: 246px;
                height: 391px;
                position: absolute;
                left: 58px;
                top: 63px;
                // border: 1px solid #333;
                
            .wrap_middle
                width: 246px;
                height: 391px;
                position: absolute;
                left: 421px;
                top: 63px;
                // border: 1px solid #333;
            .wrap_right
                width: 246px;
                height: 391px;
                position: absolute;
                right: 60px;
                top: 63px;
                // border: 1px solid #333;
            .message
                .con
                    width:100%
                    height:100%
                    position:relative
                    .market_top
                        position:absolute
                        line-height:30px
                        color:#fff
                        font-size:24px
                    .market_icon
                        width: 62px
                        height:70px
                        position:absolute
                        top:77px
                        right:0px
                    .market_bottom
                        font-size:18px
                        line-height:25px
                        color:#424C8F
                        position:absolute
                        top:160px
        .bg
            width:871px                
            height:599px
            position:absolute
            bottom:0
            right:-12px
            z-index:100
            .up
                position:absolute
                bottom:57px
                right:40px
                width:783px
                height:506px
                z-index:2
            .down
                position:absolute
                width:100%
                z-index:1
        

</style>